<script setup lang="ts">
import cpNavBar from '@/components/CpNavBar.vue';
import { ref } from 'vue';
import { showToast } from 'vant';
import { loginByPassword, sendMobildCode, loginByCode } from '@/services/user';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '@/stores'
const router = useRouter();
const route = useRoute();
const store = useUserStore()

const isUsePwd = ref(true);
const isEye = ref(true);
const checked = ref(true);
const formData = ref<{
    phone: string;
    pwd: string;
}>({ phone: '13230000001', pwd: 'abc12345' })

const clickRight = () => {
    console.log('clickRight');
};
const onSubmit = async (val: any) => {
    console.log('onSubmit', val);
    //判断是否勾选
    if (!checked.value) {
        showToast('请同意用户协议和条款!')
        return
    }
    //调用登录请求
    // 验证完毕，进行登录
    const res = isUsePwd.value ? await loginByPassword(formData.value.phone, formData.value.pwd) : await loginByCode(formData.value.phone, formData.value.pwd)
    console.log(res, '=== res 55 ===');
    store.setUser(res.data)
    // 如果有回跳地址就进行回跳，没有跳转到个人中心
    router.push((route.query.returnUrl as string) || '/user')
    showToast('登录成功')
}
const validatorPhone = (val: string) => {
    return /^1[3-9]\d{9}$/.test(val);
}
const countDownTime = ref(60 * 1000)
const isShowCount = ref(false)
const countDownRef = ref<any>(null);
const onFinish = () => {
    isShowCount.value = false;
    countDownRef.value.reset();
}
const startCountDown = async () => {
    isShowCount.value = true;
    countDownRef.value.start();
    //调用发短信接口
    const res = await sendMobildCode(formData.value.phone, 'login')
    console.log(res, '=== res 55 ===');
    if (res.code == 10000) {
        showToast('短信发送成功!')
    }
}

</script>

<template>
    <div class="login-page">
        <cp-nav-bar right-text="" @clickRight="clickRight" />
        <!-- 密码登录或者短信登录 -->
        <div class="login-header">
            <h3>{{ isUsePwd ? '密码登录' : '短信验证码登录' }}</h3>
            <span @click="isUsePwd = !isUsePwd">
                {{ isUsePwd ? '短信验证码登录' : '密码登录' }}
                <van-icon name="arrow" />
            </span>
        </div>
        <!-- 手机号和密码/短信验证码登录 -->
        <van-form @submit="onSubmit">
            <van-field v-model="formData.phone" placeholder="请输入手机号" name="validator"
                :rules="[{ validator: validatorPhone, message: '请输入正确的手机号' }]" />
            <van-field v-if="isUsePwd" v-model="formData.pwd" placeholder="请输入密码" :type="isEye ? 'password' : 'text'"
                :rules="[{ required: true, message: '请填写密码' }]">
                <template #button>
                    <span @click="isEye = !isEye">
                        <van-icon name="eye-o" v-if="isEye" />
                        <van-icon name="closed-eye" v-else />
                    </span>
                </template>
            </van-field>
            <!-- eye-o closed-eye -->
            <van-field v-else v-model="formData.pwd" center clearable placeholder="短信验证码">
                <template #button>
                    <span style="color: var(--cp-primary);" v-show="!isShowCount" @click="startCountDown">发送验证码</span>
                    <van-count-down ref="countDownRef" v-show="isShowCount" :time="countDownTime" :auto-start="false"
                        format="ss s" @finish="onFinish" />
                </template>
            </van-field>
            <van-checkbox v-model="checked" style="padding: 20px 12px;">
                我已同意
                <a href="javascript:;" style="color: var(--cp-primary);">用户协议</a>及
                <a href="javascript:;" style="color: var(--cp-primary);">隐私条款</a>
            </van-checkbox>
            <van-button type="primary" block round native-type="submit"
                style="width: 80%;margin:12px auto;">登录</van-button>
        </van-form>

        <a href="javascript:;" style="display: block;padding:12px 0 0 10%;">忘记密码？</a>
        <van-divider style="padding: 12px;margin-top:72px">第三方登录</van-divider>
        <van-icon name="qq" class="qq-icon" />
    </div>
</template>

<style lang="scss" scoped>
.login-page {
    padding-top: 46px;

    .login-header {
        padding: 24px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        h3 {
            font-size: 24px;
            font-weight: normal;
        }
    }

    .qq-icon {
        color: var(--cp-primary);
        font-size: 40px;
        text-align: center;
        width: 40px;
        height: 40px;
        display: block;
        margin: 0 auto;
        cursor: pointer;
    }

}
</style>
